/* v.1401.08.18
change:
    continer 
    continer-h
    continer-table
    Popup backlight >   h3 i  'Close btn
    .submit         ' دکمه پیش فرض

    form-edit    بررسی شود - که با گرید سایز داده شود
    
	+ table-btn
	+ table-edit-bg    بکگراند ردیفی که قراره ویرایش بشه سبز بشه

    ___________1401/05/02_____________
    + .invalid      انیمیشن موقعی که ریگولار فالس هست
    margin padding      تمامی مارجین و پدینگ ها بجای رم  با پیکسل جایگذین شد.   mt-1 = 5px   mt-2 = 10px

    ___________1401/08/10_____________
	+ .grid-contaner{}
	یک دیو میذاری با کلاس بالا 
	بعد داخلش کولباکس تعریف میکنی  و برای چیدمانش باید به دیو ها  استایل بدی با کد زیر
	grid-area : row-line-start  / col-line-start / row-line-end / col-line-end
	            1/3/2/2

	کلاس کولباکس هم چون هر ساتی کولباکس مخصوص به خودشو داره   در نتیجه کلاس کولباکسو به فایل استایل منتقل کردیم

    ___________1402/04/01 _____________
    confirm css , html
    کلیات فرم تو مستره1   قسمت تکست باکس و دکمه ها  توی هر پیج نوشته میشه2
    'این تو مستر نوشته بشه
   1:
        <div class="confirm confirm-sm" id="frm_confirm"></div>
    
'اینم تو هر پیجی که نیاز داری بنویس
2    
        <div id="frm_test">
        'اگه نیاز به تکست باکس داری اینم اینجا بنویس
        <div class="inputbox mx-3">
            <span>متن یادداشت</span>
            <textarea runat="server" id="Textarea1"  rows="3"></textarea>
        </div>

        <div class="footer-confirm">
            <asp:Button ID="btn1" runat="server" Text="ارسال" cssclass="btn-md bg-green3 floatright"/>
            <a href="#" class="btn-md bg-b" onclick="close_confirm()">انصراف</a>
        </div>
</div>

'اینم تو رویداد هر دکمه ای که خواستی فرم باز کنه
onclick="open_confirm('frm_test','حذف درخواست','bg-red2','متن توضیحات');"

    ___________1402/07/03 _____________
    .form-edit        مثل همون اینپوت باکسه   فقط برای فرم های ادیت شکل
        
    ___________1402/09/24 _____________
    .lastchild   .firstchild     برای چسباندن باکس های اول و آخر  به کنار    
        
        
*/
@font-face 
{
	font-family:'raminnum';font-style:normal;font-weight:normal;
	src:url('../font/Shabnam.ttf') format('truetype');
	src:url('../font/Shabnam.woff') format('woff');

}

@font-face 
{
	font-family:'raminb';font-style:normal;font-weight:normal;
	src:url('../font/Mikhak-black.ttf') format('truetype');}
@font-face 
{
	font-family:'ramin';font-style:normal;font-weight:normal;
	src:url('../font/Mikhak-bold.ttf') format('truetype');}
@font-face 
{
	font-family:'ram';font-style:normal;font-weight:normal;
	src:url('../font/Mikhak-Medium.ttf') format('truetype');}


html{font-size:10px;font-family:ramin; padding:0px;margin:0px;}

h1, h2, h3, h4, h5, h6,p {display:block;padding:0;margin:0;font-weight:normal;}
pre{clear:both;}
a{text-decoration:none;}
*{box-sizing:border-box;outline:none}
.cursor{cursor:pointer}


.trans{transition:all 0.7s ; -moz-transition:all 0.7s;-webkit-transition: all 0.7s;-o-transition: all 0.7s;}
.trans1{transition:all 1s ; -moz-transition:all 1s;-webkit-transition: all 1s;-o-transition: all 1s;}
.trans2{transition:all 2s ; -moz-transition:all 2s;-webkit-transition: all 2s;-o-transition: all 2s;}
.trans3{transition:all 4s ; -moz-transition:all 4s;-webkit-transition: all 4s;-o-transition: all 4s;}


.table-norecord{background:#fafafa;border:solid 1px #ccc;border-radius:4px;margin:15px 10%;width:80%; padding:15px;text-align:center;}


.lastchild{margin-left:0 !important}
.firstchild{margin-right:0 !important}


/*____________________ Regular __________________*/
.regularbox{position:fixed;left:10px;bottom:-100px;transition:ease   all 1s ;visibility:visible;z-index:11111;}
.regularbox label{display:block;padding:10px 18px;background:#ff3333;color:#fff;font:1.2rem ramin;margin:7px 0;border-radius:6px;box-shadow:0 0 10px rgba(255,0,0,0.5)}


/*____________________ Color- __________________*/
.color-0{color:#000 !important}
.color-3{color:#333 !important}
.color-5{color:#555 !important}
.color-6{color:#666 !important}
.color-7{color:#777 !important}
.color-9{color:#999 !important}
.color-a{color:#aaa !important}
.color-b{color:#bbb !important}
.color-c{color:#ccc !important}
.color-d{color:#ddd !important}
.color-f{color:#fff !important}

.color-blue0{color:#004d66 !important}
.color-blue1{color:#007399 !important}
.color-blue2{color:#0099cc !important}
.color-blue3{color:#00bfff !important}
.color-blue4{color:#33ccff !important}
.color-blue5{color:#66d9ff !important}
.color-blue6{color:#e6f9ff !important}

.color-red0{color:#78281F !important}
.color-red1{color:#B03A2E  !important}
.color-red2{color:#ff0000 !important}
.color-red3{color:#EC7063 !important}
.color-red4{color:#F1948A !important}
.color-red5{color:#F5B7B1 !important}
.color-red6{color:#FADBD8 !important}


.color-green0{color:#186A3B !important}
.color-green1{color:#239B56 !important}
.color-green2{color:#2ECC71 !important}
.color-green3{color:#58D68D !important}
.color-green4{color:#82E0AA !important}
.color-green5{color:#ABEBC6 !important}
.color-green6{color:#D5F5E3 !important}


.color-orange0{color:#7E5109 !important}
.color-orange1{color:#B9770E !important}
.color-orange2{color:#F39C12 !important}
.color-orange3{color:#F5B041 !important}
.color-orange4{color:#F8C471 !important}
.color-orange5{color:#FAD7A0 !important}
.color-orange6{color:#FDEBD0 !important}


.color-violet0{color:#512E5F !important}
.color-violet1{color:#76448A !important}
.color-violet2{color:#9B59B6 !important}
.color-violet3{color:#AF7AC5 !important}
.color-violet4{color:#C39BD3 !important}
.color-violet5{color:#D7BDE2 !important}
.color-violet6{color:#EBDEF0 !important}



/*____________________ bg- __________________*/
.bg-0{background:#000}
.bg-3{background:#333}
.bg-6{background:#666}
.bg-9{background:#999}
.bg-b{background:#bbb}
.bg-c{background:#ccc}
.bg-d{background:#ddd}
.bg-e{background:#eee}
.bg-f{background:#fff}

.bg-blue0{background:#004d66}
.bg-blue1{background:#007399}
.bg-blue2{background:#0099cc}
.bg-blue3{background:#00bfff !important}
.bg-blue4{background:#33ccff !important}
.bg-blue5{background:#66d9ff}
.bg-blue6{background:#e6f9ff}

.bg-red0{background:#78281F !important}
.bg-red1{background:#B03A2E !important}
.bg-red2{background:#E74C3C !important}
.bg-red3{background:#EC7063 !important}
.bg-red4{background:#F1948A !important}
.bg-red5{background:#F5B7B1 !important}
.bg-red6{background:#FADBD8 !important}


.bg-green0{background:#186A3B !important}
.bg-green1{background:#239B56 !important}
.bg-green2{background:#2ECC71 !important}
.bg-green3{background:#58D68D !important}
.bg-green4{background:#82E0AA !important}
.bg-green5{background:#ABEBC6}
.bg-green6{background:#D5F5E3}


.bg-orange0{background:#7E5109}
.bg-orange1{background:#B9770E !important}
.bg-orange2{background:#F39C12 !important}
.bg-orange3{background:#F5B041 !important}
.bg-orange4{background:#F8C471 !important}
.bg-orange5{background:#FAD7A0 !important}
.bg-orange6{background:#fff5e5 !important}


.bg-violet0{background:#512E5F !important}
.bg-violet1{background:#76448A !important}
.bg-violet2{background:#9B59B6 !important}
.bg-violet3{background:#AF7AC5 !important}
.bg-violet4{background:#C39BD3 !important}
.bg-violet5{background:#D7BDE2}
.bg-violet6{background:#EBDEF0}


/*____________________ Line height __________________*/
.lh-1{line-height:1rem !important;}
.lh-2{line-height:2rem !important;}
.lh-3{line-height:3rem !important;}
.lh-4{line-height:4rem !important;}

/*____________________ Teyf-bg __________________*/
.teyf-orange{background-image: linear-gradient(#fb8c00, #ffa523) !important;}
.teyf-blue{background-image: linear-gradient(to left,#00bcd4, #00d8f3) !important;}
.teyf-blue2{background-image: linear-gradient(to right ,#33ccff, #00ace6) !important;}
.teyf-green{background-image: linear-gradient(to right ,#cccc00, #b3b300) !important;}
.teyf-green2{background-image: linear-gradient(to right ,#77b300, #669900) !important;}
.teyf-red{background-image: linear-gradient(to right ,#ff6666, #ff4d4d) !important;}



/*____________________ Font-size-# __________________*/
.fs-0{font-size:0px !important}
.fs-8{font-size:8px}
.fs-10{font-size:10px !important}
.fs-12{font-size:12px !important}
.fs-13{font-size:13px !important}
.fs-14{font-size:14px !important}
.fs-16{font-size:16px !important}
.fs-18{font-size:18px !important}
.fs-20{font-size:20px !important}
.fs-22{font-size:22px !important}
.fs-23{font-size:23px !important}
.fs-24{font-size:24px}
.fs-26{font-size:26px}
.fs-30{font-size:30px}
.fs-32{font-size:32px}
.fs-34{font-size:34px}
.fs-36{font-size:36px}
.fs-40{font-size:40px}
.fs-45{font-size:45px}
.fs-50{font-size:50px}
.fs-55{font-size:55px}


.ff-normal{font-family:ram}
.ff-b{font-family:ramin}
.ff-bb{font-family:raminb}
/*___________________ font-weight# __________________*/
.fw-0{font-weight:normal;font-family:ramin}
.fw-b{font-weight:bold;}


/*____________________ padding-# __________________*/
.p-0{padding:0 !important;}
.p-05{padding:5px !important;}
.p-1{padding:10px !important;}
.p-2{padding:20px;}
.p-3{padding:30px;}
.p-4{padding:40px;}
.p-5{padding:50px;}


.pt-0{padding-top:0;}
.pt-1{padding-top:10px;}
.pt-2{padding-top:20px;}
.pt-3{padding-top:30px;}
.pt-4{padding-top:40px;}
.pt-5{padding-top:50px;}


.pr-0{padding-right:0;}
.pr-1{padding-right:10px;}
.pr-2{padding-right:20px;}
.pr-3{padding-right:30px;}
.pr-4{padding-right:40px;}
.pr-5{padding-right:50px;}


.pl-0{padding-left:0;}
.pl-1{padding-left:10px;}
.pl-2{padding-left:20px;}
.pl-3{padding-left:30px;}
.pl-4{padding-left:40px;}
.pl-5{padding-left:50px;}



.pb-0{padding-bottom:0;}
.pb-1{padding-bottom:10px;}
.pb-2{padding-bottom:20px;}
.pb-3{padding-bottom:30px;}
.pb-4{padding-bottom:40px;}
.pb-5{padding-bottom:50px;}



.px-0{padding-right:0 !important;padding-left:0 !important;}
.px-1{padding-right:10px !important;padding-left:10px !important;}
.px-2{padding-right:20px !important;padding-left:20px !important;}
.px-3{padding-right:30px !important;padding-left:30px !important;}
.px-4{padding-right:40px !important;padding-left:40px !important;}
.px-5{padding-right:50px !important;padding-left:50px !important;}

.py-0{padding-top:0 !important;padding-bottom:0 !important;}
.py-1{padding-top:10px !important;padding-bottom:10px !important;}
.py-2{padding-top:20px !important;padding-bottom:20px !important;}
.py-3{padding-top:30px !important;padding-bottom:30px !important;}
.py-4{padding-top:40px !important;padding-bottom:40px !important;}
.py-5{padding-top:50px !important;padding-bottom:50px !important;}




/*____________________ margin-# __________________*/
.m-auto{margin:0 auto !important;}
.m-0{margin:0 !important;}
.m-1{margin:10px !important;}
.m-2{margin:20px !important;}
.m-3{margin:30px !important;}
.m-4{margin:40px;}
.m-5{margin:50px;}

.mt-0{margin-top:0 !important;}
.mt-1{margin-top:10px !important;}
.mt-2{margin-top:20px !important;}
.mt-3{margin-top:30px !important;}
.mt-4{margin-top:40px !important;}
.mt-5{margin-top:50px !important;;}


.mr-0{margin-right:0;}
.mr-1{margin-right:10px !important;}
.mr-2{margin-right:20px !important;}
.mr-3{margin-right:30px;}
.mr-4{margin-right:40px;}
.mr-5{margin-right:50px;}


.ml-0{margin-left:0;}
.ml-1{margin-left:10px;}
.ml-2{margin-left:20px;}
.ml-3{margin-left:30px;}
.ml-4{margin-left:40px;}
.ml-5{margin-left:50px;}


.mb-0{margin-bottom:0;}
.mb-1{margin-bottom:10px !important;}
.mb-2{margin-bottom:20px;}
.mb-3{margin-bottom:30px;}
.mb-4{margin-bottom:40px;}
.mb-5{margin-bottom:50px;}



.mx-auto{margin-right:auto !important;margin-left:auto !important;}
.mx-0{margin-right:0 !important;margin-left:0 !important;}
.mx-1{margin-right:10px !important;margin-left:10px !important;}
.mx-2{margin-right:20px !important;margin-left:20px !important;}
.mx-3{margin-right:30px !important;margin-left:30px !important;}
.mx-4{margin-right:40px !important;margin-left:40px !important;}
.mx-5{margin-right:50px !important;margin-left:50px !important;}

.my-0{margin-top:0 !important;margin-bottom:0 !important;}
.my-1{margin-top:10px !important;margin-bottom:10px !important;}
.my-2{margin-top:20px !important;margin-bottom:20px !important;}
.my-3{margin-top:30px !important;margin-bottom:30px !important;}
.my-4{margin-top:40px !important;margin-bottom:40px !important;}
.my-5{margin-top:50px !important;margin-bottom:50px !important;}

/*___________________ width-# __________________*/
.w-10{width:10%}
.w-20{width:20% !important}
.w-30{width:30% !important}
.w-40{width:40% !important}
.w-50{width:50%}
.w-60{width:60%}
.w-70{width:70%}
.w-80{width:80% !important}
.w-90{width:90%}
.w-100{width:100% !important}


/*___________________ height-# __________________*/
.h-10{height:10%}
.h-20{height:20%}
.h-30{height:30%}
.h-40{height:40%}
.h-50{height:50% !important}
.h-60{height:60%}
.h-70{height:70%}
.h-80{height:80%}
.h-90{height:90%}
.h-100{height:100%}

/*___________________ radius-# __________________*/
.radius-3{border-radius:3px}
.radius-5{border-radius:5px}
.radius-7{border-radius:7px}
.radius-10{border-radius:10px}
.radius-15{border-radius:15px}



/*___________________ shadow-# __________________*/
.shadow-0{box-shadow:none;}
.shadow-1{box-shadow:0 0 0 5px rgba(0,0,0,0.1);}
.shadow-11{box-shadow:0 0 0 5px rgba(0,0,0,0.3);}
.shadow-2{box-shadow:0 0 0 10px rgba(0,0,0,0.1);}
.shadow-22{box-shadow:0 0 0 10px rgba(0,0,0,0.3);}
.shadow-3{box-shadow:0 0 0 15px rgba(0,0,0,0.1);}
.shadow-33{box-shadow:0 0 0 15px rgba(0,0,0,0.3);}

/*___________________ text-align# __________________*/
.ta-right{text-align:right !important}
.ta-left{text-align:left !important}
.ta-center{text-align:center !important}
.ta-justify{text-align:justify}
/*___________________ Display __________________*/
.displayFalse{display:none !important;}
.displaytrue{display:inherit !important ;}
.displayblock{display:block !important; width:auto  !important}
.displayinlineblock{display:inline-block !important;}
.hidden{display:none !important;}


.floatleft{float:left;}
.floatright{float:right;}

.pos-ab{position:absolute}
.pos-re{position:relative}

/*___________________ border ___________________*/
.border-0{border:none}
.border-1{border:solid 1px;}
.border-2{border:solid 2px;}
.border-3{border:solid 3px;}
.border-4{border:solid 4px;}

.border-color0{border-color:#000}
.border-color5{border-color:#555}
.border-color9{border-color:#999}
.border-colorc{border-color:#ccc}
.border-colore{border-color:#eee !important}

/*___________________ Opacity __________________*/
.opacity0{opacity:0}
.opacity1{opacity:1}
.opacity2{opacity:0.2}
.opacity4{opacity:0.4}
.opacity6{opacity:0.6}
.opacity8{opacity:0.8}


/*___________________ Grid __________________*/
.grid-contaner{  display: grid;grid-template: auto ;}


/*  چون هر سایتی کولباکس مخصوص به خودش رو داره 
	بهتره که این کولباکس در فایل استایل نوشته و سفارشی سازی بشه
.colbox,.colbox-row{margin:0px;margin-bottom:15px; background:#fff;padding:15px 25px;border-radius:10px;box-shadow:0 0 20px rgba(0,0,0,0.09)}
.colbox > h3,.colbox-row > h3{font:1.3rem raminb;padding:0 0 10px 0;color:#999; display:block; border-bottom:dashed 1px #cac2ad;margin-bottom:20px;}
.colbox h3:before,.colbox-row h3:before{content:'\e81c';font-size:1.5rem;padding-left:6px;float:right;display:inline-block}

.colbox-row{margin:0 10px}

.row >h3{color:Orange;border-bottom:solid 1px orange;font:13px raminb;padding-bottom:5px;margin:10px 0 20px 0}
	*/

@media only screen and (max-width:1200px) {

html{font-size:9px;}

}

@media only screen and (max-width:1020px)
{

html{font-size:8px;}

}






.offset-1 {margin-right: 8.33333333%;}
.offset-2 {margin-right: 16.66666667%;}
.offset-3 {margin-right: 25%;}
.offset-4 {margin-right: 33.33333333%;}
.offset-5 {margin-right: 41.66666667%;}
.offset-6 {margin-right: 50%;}
.offset-7 {margin-right: 58.33333333%;}
.offset-8 {margin-right: 66.66666667%;}
.offset-9 {margin-right: 75%;}
.offset-10 {margin-right: 83.33333333%;}
.offset-11 {margin-right: 91.66666667%;}



.continer > h3{font:1.7rem raminb;padding:0 0 15px 0; display:block; color:#403d38; border-bottom:dashed 1px #cac2ad;margin-bottom:10px;}
.continer-table{padding:0;margin:0 5px;}



.continer-h{background:#fff;padding:0px 20px 0px 20px;border-bottom:solid 2px #eee; margin-bottom:0;display: flex; flex-wrap: wrap;}
.continer-h > h3{font:1.5rem raminb;padding:15px 0 5px 0; display:block;width:100%; color:#bbb;backgroeund:#1ed4e4 bottom right url(../images/continer-h3.png)no-repeat;}
.continer-h > h3:before{content:'\E821';font-size:1.5rem;padding-left:4px;}









/*________________ tableeee ______________________*/
.table{background:#fff; width:100% ;direction:rtl;padding:0px;margin:0px;border-collapse:collapse;}
.table-title{background-image: linear-gradient(#f5f5f5, #e5e5e5) !important;height:30px;position: sticky;top:-1px;z-index:50;box-shadow:none !important;position:relative;}

.table th{border:solid 1px #ccc; border-top:solid 2px #ccc; border-collapse:collapse;text-align:right;color:#000;padding:10px 5px;font:13px ramin;}
.table td{border:solid 1px #eee;border-collapse:collapse;height:25px;padding:8px 7px;font:12px tahoma;color:#444;vertical-align:middle}
.table tr:nth-child(odd){background:#fafafa;}
.table tr:hover{background:#e6faff;z-index:1111;box-shadow:0 0 10px rgba(0, 204, 255,0.5);position:relative;}
.table tr:hover .table-btn{opacity:1;}
.table tr:hover> td{color:#000;}


.listview_header{display:inherit;padding:9px 16px;background:#fafafa;min-height:50px;width:100%;border:solid 1px #eee}



.table-size-10{width:10%;min-width:10%;max-width:10%;}
.table-size-15{width:15%;min-width:15%;max-width:15%;}
.table-size-20{width:20%;min-width:20%;max-width:20%;}
.table-size-25{width:25%;min-width:25%;max-width:25%;}
.table-size-30{width:30%;min-width:30%;max-width:30%;}
.table-size-40{width:40%;min-width:40%;max-width:40%;}
.table-size-50{width:50%;min-width:50%;max-width:50%;}
.table-size-60{width:60%;min-width:60%;max-width:60%;}
.table-size-70{width:70%;min-width:70%;max-width:70%;}
.table-size-80{width:80%;min-width:80%;max-width:80%;}
.table-size-90{width:90%;min-width:90%;max-width:90%;}

.table-s35{width:35px;min-width:35px;max-width:35px;font-size:11px !important;padding:0;direction:ltr;text-align:center !important; transform: rotate(180deg); writing-mode: vertical-rl;white-space: nowrap  !important;z-index:99999;}
.table-s50{width:50px;min-width:50px;max-width:50px;font-size:11px !important}
.table-s70{width:70px;min-width:70px;max-width:70px;font-size:11px !important;}
.table-s100{width:100px;min-width:100px;max-width:100px;font-size:12px !important}


.table-btn{display:inline-block;margin:0 5px;font-size:18px;color:#ccc}
.table-btn-del{display:inline-block;font-size:18px;color:#ff8080;float:left;margin:0; margin-right:10px;}
.table-btn:hover{color:#777}
.table-btn-del:hover{color:red !important}
.table-btn-update{color:#fff;background:#63c381;font:12px ramin;padding:5px 5px;border-radius:5px;line-height:15px;opacity:1}
.table-btn-update:hover{color:#008000;}
.table-btn-update i{margin-left:4px;}

.table-edit{background:#e6ffe6 !important}

.table-norecord{display:block;padding:10px 20px;background:#fafafa;color:#555;border:solid 1px #aaa;text-align:center;margin-top:20px;}
.table-edit td textarea{width:98%;height:50px !important;font:15px tahoma;}
.table-edit td input[type=text]{width:100%;padding:7px 4px;font:12px tahoma;border:1px solid #aaa;}



.tbl {
        width: 100%;
        display: table;
    }
    .tbl-row{
        display: table-row;
    }
    .tbl-cell{
        display: table-cell;
        border: 1px solid #000;
        padding: 8px;
        line-height: 1.42857143;
        vertical-align: top;
    }



/*____________________ Page number __________________*/
.pagenumber{display:inherit;padding:9px 16px;background:#fafafa;min-height:50px;width:100%;border:solid 1px #eee}
.pagenumber h6{ float:right;display:inline-block; padding:5px 15px;color:#aaa;text-align:center;background:#fff;border:solid 1px #eee;font-size:1.1rem;margin-left:10px;}
.pagenumber .page-num{display:inline-block;background:#fff;text-align:center;width:27px;height:27px;color:#aaa;border:solid 1px #eee;border-radius:3px;font-size :1.2rem;font-family: ramin; line-height:26px;}
.pagenumber .page-num:hover{background:#ccf5ff;border:solid 1px #ccf5ff !important}

.number-current{background:#00ccff !important;color:#fff !important;border:solid 1px #eee !important;font-family:raminb !important;}
.number-currenst:hover{background:#ccf5ff !important;color:#fff;}


/*___________________ inpuuuuuutbox __________________*/
.inputbox,.inputbox-sm,.inputbox-border,.form-edit{width:auto !important;position:relative;height:auto;}
.inputbox:hover,.inputbox:focus-within,.inputbox-sm:hover,.inputbox-sm:focus-within{opacity:1;}
.inputbox span,.inputbox-sm span{position:absolute;right:8px; top:-10px;display:inline-block; padding:0 7px;font:12px ramin;padding-right:2px;color:#555;z-index:90;}
.inputbox span:before,.inputbox-sm span:before{content: '';height: 2px;background: #fff;position: absolute;left: 0px;top: 10px;width: 100%;z-index: -1;}
.inputbox input[type=text],.inputbox textarea,.inputbox select,.inputbox input[type=password],.form-edit input[type=text],.form-edit label
{border:solid 2px #ddd; resize: none;padding:8px 8px ;width:100% !important;color:#555;font:13px ramin;margin:0 !important;border-radius:5px;}

.inputbox input[type=text]:focus,.inputbox-sm input[type=text]:focus,.inputbox input[type=password]:focus{border:solid 2px #33d6ff}
.inputbox:focus-within > span,.inputbox-sm:focus-within >span{color:#006680 !important;}

.inputboxgroup input[type=text],.inputboxgroup select{width:70% !important;border-radius:0 5px 5px 0;float:right;border-left:none;}
.inputboxgroup input[type=submit],.inputboxgroup a{float:left;width:30%;border-radius:5px 0 0 5px;padding:12px 0 10px 0 !important;}


.inputbox input[type=password]{font:20px tahoma;padding:6px 8px !important}
.inputbox select{cursor:pointer;font-size:1.2rem;}

.inputbox-border,.inputbox-border-sm{background:#fff;opacity:1;border:solid 2px #ddd;padding:10px;border-radius:4px;}
.inputbox-border-sm {padding:5px;}
/*_ sm _*/
.inputbox-sm input[type=text],.inputbox-sm textarea,.inputbox-sm select,.inputbox-sm input[type=password]
	{border:solid 2px #ddd; resize: none;padding:7px 7px;padding-top:10px; width:100% !important;color:#555;font:1.1rem ramin;margin:0 !important;border-radius:5px;}
.inputbox-sm span{font-size:1.2rem;top:-10px}
.inputbox-sm span:before{margin-top:0px;}
.inputbox-sm select{padding:8px 7px;}



.textbox{border:solid 1px #ccc !important;padding:7px;}




/*___________________ form-edit  detail  __________________*/
.form-edit{margin-bottom:5px;border:solid 1px #ddd;position:relative;min-height:35px;height:auto; background:#f2f2f2;padding-right:7px;font:12px ramin;line-height:30px;vertical-align:top}
.form-edit input[type=text],.form-edit label,.form-edit select{position:absolute;right:30%;left:1px;bottom:1px;top:1px;border:none;width:70% ;background:#fff;}
.form-edit input[type=text]:focus{border:solid 1px #33d6ff;border-radius:0}

.form-edit-lg select{position:absolute;right:50%;bottom:1px;top:1px;width:50%;}
.form-edit-lg input[type=text]{position:absolute;right:50%;left:1px;bottom:1px;top:1px;width:50% !important;}
.form-edit-lg textarea{heighght:100px;border:none;width:50% !important;margin-right:50%;top:0;position:relative;margin-top:-30px;}


/*___________________ btn __________________*/
.btn-sm,.btn-md,.btn-lg,.btncancel{display:inline-block; border:none;border-radius:5px;text-align:center;color:#fff;margin: 0;cursor:pointer;opacity:0.9;white-space:nowrap}
.btn-sm:hover,.btn-md:hover,.btn-lg:hover,.submit:hover{box-shadow:0px 15px 12px -9px rgba(0,0,0,0.2);opacity:1}


.btn-sm{padding:6px 10px;font:12px ramin;}
.btn-md{padding:8px 20px;font:14px ramin;}
.btn-lg{padding:10px 30px;font:16px raminb;}

.submit{display:inline-block; border:none;padding:9px 22px;font:13px raminb;border-radius:5px;text-align:center;color:#fff;opacity:0.9;white-space:nowrap}
.btncancel{background:#fff;color:#999;border:solid 1px #ccc;}
.btncancel:hover{background:#fafafa;}

.btn-0{border:solid 1px #0cf;color:#0cf;}
.btn-0:hover{box-shadow:0px 0px 8px rgb(0, 204, 255,0.5)}

/*___________________  Form __________________*/
/*____________________ Popup backlight Confirm__________________*/
.backlight{position:fixed;top:0;left:0; right:0; bottom:0;background:rgba(0,0,0,0.5);z-index:99;display:block;visibility:hidden;opacity:0;transition: all 0.4s ; -moz-transition:all 0.4s;-webkit-transition: all 0.4s;-o-transition: all 0.4s;cursor:pointer;}
.confirm{position:absolute ;top:0px;padding:65px 35px 15px 35px; background:#fff;border-radius:10px;box-shadow:0 0 20px rgba(0,0,0,0.5); visibility:hidden  ;opacity:0;z-index:11111;transition: all 0.4s ; -moz-transition:all 0.4s;-webkit-transition: all 0.4s;-o-transition: all 0.4s;overflow:hidden;}
.confirm h3{position:absolute;top:0;left:0;right:0; color:#fff;font:1.5rem raminb;padding:12px 35px;}
.confirm:before{content:'';position:absolute;bottom:0;left:0;right:0;height:60px;background:#f5f5f5;padding:12px 30px;padding-bottom:7px; z-index:-1;}

.confirm-sm{right:50%;margin-right:-15%;width:30%;}
.confirm-md{right:50%;margin-right:-20%;width:40%;}
.confirm-lg{right:50%;margin-right:-30%;width:60%;}





/*___________________ Radio checkbox __________________*/
.checkbox {display:inline-block;position: relative;margin:5px 0; padding-left:20px;  cursor: pointer;color:#444;line-height:22px;height:30px;}
.checkbox:hover{color:#000}
.checkbox input{opacity:0;}
.checkbox i {display:inline-block;float:right;height:22px;width:22px;color:#fff; margin-left:8px;text-align:center;font-size:13px;border-radius:3px;line-height:22px;background:#ccc;transition: all 0.3s ; -moz-transition:all 0.3s;-webkit-transition: all 0.3s;-o-transition: all 0.3s;position:relative;}

.checkbox:hover input ~ i {background:#bbb}
.checkbox input:checked ~ i {background:#99cc00}
.checkbox input:checked ~ i:after {content:'';position:absolute;top:0px;left:0px; display:block; width:22px;height:22px;border-radius:50%;box-shadow:0 0 13px 1px rgb(153, 204, 0)}


.checkbox-red input:checked ~ i {background:red}
.checkbox-red input:checked ~ i:after {box-shadow:0 0 13px 1px red}

.checkbox-orange input:checked ~ i {background:orange}
.checkbox-orange input:checked ~ i:after {box-shadow:0 0 13px 1px orange}

.checkbox-blue input:checked ~ i {background:#33ccff}
.checkbox-blue input:checked ~ i:after {box-shadow:0 0 13px 2px #33ccff}


/*___________________ tag __________________*/
.tag-lg ,.tag-md ,.tag-sm{display:inline-block;border-radius:7px;text-align:center;}
.tag-sm{padding:4px 9px;font:1rem ramin}
.tag-md{padding:5px 11px;font:1.2rem ramin}
.tag-lg{padding:6px 13px;font:1.4rem ramin}



/*____________________ Tab box _______________________*/
.tab-btn{display:inline-block;padding:7px 16px;color:#777; margin:0px;margin-left:5px;border:solid 1px #ddd; border-radius:5px 5px 0px 0px;bxox-shadow:0 -3px 4px rgba(0,0,0,0.05);background:#fff;cursor:pointer;}
.tab-btn:before{content:'\f111';display:inline-block;font-size:8px;margin-left:7px; color:#ddd;font-family: 'fonticon';}
.tab-btn:hover{color:#222;}
.tab-btn-active{color:#00C0B8 !important;font-family:raminb; padding:10px 18px 7px 18px;position:relative;z-index:11;border:solid 1px #00ccff;border-bottom:none;}
.tab-btn-active:before{color:#00ccff;text-shadow:0 0 15px #00ccff}
.tab-box{margin-top:-2px;display:none;background:#fff;padding:20px;border:solid 1px #ddd;position:relative;z-index:10;}
.tab-btn-active ~ .tab-box{border-top:solid 1px #00ccff;}


/*___________________ Font Icon __________________*/
@font-face {
  font-family: 'fonticon';
  src: url('../font/fonticon.woff') format('woff'),
       url('../font/fonticon.ttf') format('truetype');
  font-weight: normal;
  font-style: normal;
}

.i{display:inline-block;color:#000;  font-family: 'fonticon';}
[class^="icon-"]:before, [class*=" icon-"]:before {font-family: "fonticon";font-style: normal;}


.spin {
-moz-animation: spin 2s infinite linear;
-o-animation: spin 2s infinite linear;
-webkit-animation: spin 2s infinite linear;
animation: spin 2s infinite linear;
display: inline-block;
}
@keyframes spin {
0% {
-moz-transform: rotate(0deg);
-o-transform: rotate(0deg);
-webkit-transform: rotate(0deg);
transform: rotate(0deg);
}

100% {
-moz-transform: rotate(359deg);
-o-transform: rotate(359deg);
-webkit-transform: rotate(359deg);
transform: rotate(359deg);
}
}


.icon-ok-box:before { content: '\21'; } /* '!' */
.icon-upload:before { content: '\22'; } /* '"' */
.icon-download:before { content: '\23'; } /* '#' */
.icon-reply:before { content: '\24'; } /* '$' */
.icon-delete1:before { content: '\25'; } /* '%' */
.icon-docs:before { content: '\26'; } /* '&' */
.icon-doc-text:before { content: '\27'; } /* ''' */
.icon-file-image:before { content: '\28'; } /* '(' */
.icon-setting1:before { content: '\29'; } /* ')' */
.icon-wifi:before { content: '\2a'; } /* '*' */
.icon-circle:before { content: '\2b'; } /* '+' */
.icon-circle-dot:before { content: '\2c'; } /* ',' */
.icon-chart-line:before { content: '\2d'; } /* '-' */
.icon-whatsapp:before { content: '\2e'; } /* '.' */
.icon-calendar-ok-o:before { content: '\2f'; } /* '/' */
.icon-basket:before { content: '\30'; } /* '0' */
.icon-phone1:before { content: '\31'; } /* '1' */
.icon-mail-open:before { content: '\32'; } /* '2' */
.icon-profile:before { content: '\33'; } /* '3' */
.icon-building:before { content: '\34'; } /* '4' */
.icon-check-0:before { content: '\35'; } /* '5' */
.icon-th0:before { content: '\36'; } /* '6' */
.icon-direction:before { content: '\37'; } /* '7' */
.icon-teacher:before { content: '\38'; } /* '8' */
.icon-address-card-o:before { content: '\39'; } /* '9' */
.icon-paper-plane:before { content: '\3a'; } /* ':' */
.icon-headphone:before { content: '\3b'; } /* ';' */
.icon-comment0:before { content: '\3c'; } /* '<' */
.icon-mail0:before { content: '\3d'; } /* '=' */
.icon-camera0:before { content: '\3f'; } /* '?' */
.icon-mail:before { content: '\5d'; } /* ']' */
.icon-left-inputbox:before { content: '\e019'; } /* '' */
.icon-minus:before { content: '\e0b0'; } /* '' */
.icon-warning0:before { content: '\e11a'; } /* '' */
.icon-search:before { content: '\e800'; } /* '' */
.icon-cancel:before { content: '\e801'; } /* '' */
.icon-heart:before { content: '\e802'; } /* '' */
.icon-star:before { content: '\e803'; } /* '' */
.icon-star0:before { content: '\e804'; } /* '' */
.icon-attach:before { content: '\e805'; } /* '' */
.icon-picture:before { content: '\e806'; } /* '' */
.icon-camera:before { content: '\e807'; } /* '' */
.icon-th4:before { content: '\e808'; } /* '' */
.icon-th9:before { content: '\e809'; } /* '' */
.icon-ok:before { content: '\e80a'; } /* '' */
.icon-tags:before { content: '\e80b'; } /* '' */
.icon-tag:before { content: '\e80c'; } /* '' */
.icon-lock-open:before { content: '\e80d'; } /* '' */
.icon-lock:before { content: '\e80e'; } /* '' */
.icon-share:before { content: '\e80f'; } /* '' */
.icon-home:before { content: '\e810'; } /* '' */
.icon-plus:before { content: '\e811'; } /* '' */
.icon-list:before { content: '\e812'; } /* '' */
.icon-forward:before { content: '\e813'; } /* '' */
.icon-print:before { content: '\e814'; } /* '' */
.icon-comment:before { content: '\e815'; } /* '' */
.icon-chat:before { content: '\e816'; } /* '' */
.icon-bell:before { content: '\e817'; } /* '' */
.icon-delete:before { content: '\e818'; } /* '' */
.icon-doc:before { content: '\e819'; } /* '' */
.icon-setting:before { content: '\e81a'; } /* '' */
.icon-phone:before { content: '\e81b'; } /* '' */
.icon-down1:before { content: '\e81c'; } /* '' */
.icon-up1:before { content: '\e81d'; } /* '' */
.icon-left1:before { content: '\e81e'; } /* '' */
.icon-right1:before { content: '\e81f'; } /* '' */
.icon-down0:before { content: '\e820'; } /* '' */
.icon-left0:before { content: '\e821'; } /* '' */
.icon-up0:before { content: '\e822'; } /* '' */
.icon-refresh:before { content: '\e823'; } /* '' */
.icon-off:before { content: '\e824'; } /* '' */
.icon-chart:before { content: '\e825'; } /* '' */
.icon-horn:before { content: '\e826'; } /* '' */
.icon-user-add:before { content: '\e827'; } /* '' */
.icon-users:before { content: '\e828'; } /* '' */
.icon-user:before { content: '\e829'; } /* '' */
.icon-help:before { content: '\e82a'; } /* '' */
.icon-pen:before { content: '\e82b'; } /* '' */
.icon-tag1:before { content: '\e82c'; } /* '' */
.icon-up2:before { content: '\e82d'; } /* '' */
.icon-right2:before { content: '\e82e'; } /* '' */
.icon-left2:before { content: '\e82f'; } /* '' */
.icon-down2:before { content: '\e830'; } /* '' */
.icon-menu:before { content: '\e831'; } /* '' */
.icon-checklist:before { content: '\e832'; } /* '' */
.icon-location:before { content: '\e833'; } /* '' */
.icon-eye:before { content: '\e834'; } /* '' */
.icon-spin1:before { content: '\e834'; } /* '' */
.icon-time:before { content: '\e835'; } /* '' */
.icon-horn1:before { content: '\e836'; } /* '' */
.icon-home-1:before { content: '\e837'; } /* '' */
.icon-ok1:before { content: '\e838'; } /* '' */
.icon-lamp:before { content: '\e839'; } /* '' */
.icon-signal:before { content: '\e83a'; } /* '' */
.icon-danger:before { content: '\e83b'; } /* '' */
.icon-gauge:before { content: '\e83c'; } /* '' */
.icon-pinboard:before { content: '\e83d'; } /* '' */
.icon-commerical-building:before { content: '\e83e'; } /* '' */
.icon-cancel-box:before { content: '\e83f'; } /* '' */
.icon-kif:before { content: '\e840'; } /* '' */
.icon-heart0:before { content: '\e841'; } /* '' */
.icon-heart00:before { content: '\e842'; } /* '' */
.icon-location0:before { content: '\e843'; } /* '' */
.icon-bookmark-empty:before { content: '\e844'; } /* '' */
.icon-bookmark:before { content: '\e845'; } /* '' */
.icon-reply-1:before { content: '\e846'; } /* '' */
.icon-right-open:before { content: '\e847'; } /* '' */
.icon-arrows-cw:before { content: '\e848'; } /* '' */
.icon-core:before { content: '\e849'; } /* '' */
.icon-sport:before { content: '\e84a'; } /* '' */
.icon-cog:before { content: '\e84b'; } /* '' */
.icon-garden:before { content: '\e84c'; } /* '' */
.icon-heyvan:before { content: '\e84d'; } /* '' */
.icon-video:before { content: '\e84e'; } /* '' */
.icon-book:before { content: '\e84f'; } /* '' */
.icon-spin2:before { content: '\e850'; } /* '' */
.icon-spin3:before { content: '\e851'; } /* '' */
.icon-food:before { content: '\f0f5'; } /* '' */
.icon-help-1:before { content: '\f128'; } /* '' */
.icon-box:before { content: '\f16b'; } /* '' */
.icon-car:before { content: '\f1b9'; } /* '' */





/*! Hint.css - v2.3.0 - 2016-05-21
* http://kushagragour.in/lab/hint/
* Copyright (c) 2016 Kushagra Gour; Licensed  */
[class*=hint--]{position:relative;display:inline-block;;}
[class*=hint--]:after,[class*=hint--]:before{border-radius:5px;position:absolute;-webkit-transform:translate3d(0,0,0);-moz-transform:translate3d(0,0,0);transform:translate3d(0,0,0);visibility:hidden;opacity:0;z-index:1000000;pointer-events:none;transition: all 0.5s ; -moz-transition:all 0.5s;-webkit-transition: all 0.5s;-o-transition: all 0.5s;}
[class*=hint--]:hover:after,[class*=hint--]:hover:before{visibility:visible;opacity:1;transition: all 0.5s ; -moz-transition:all 0.5s;-webkit-transition: all 0.5s;-o-transition: all 0.5s;}
[class*=hint--]:before{content:'';position:absolute;background:none;border:8px solid transparent;z-index:1000001}
[class*=hint--]:after{background:#383838;color:#fff;padding:13px 13px;font:12px ramin;line-height:8px;white-space:nowrap;}
[class*=hint--][aria-label]:after{content:attr(aria-label)}[class*=hint--][data-hint]:after{content:attr(data-hint)}
[aria-label='']:after,[aria-label='']:before,[data-hint='']:after,[data-hint='']:before{display:none!important}
.hint--top:before{border-top-color:#383838}
.hint--bottom:before{border-bottom-color:#383838}
.hint--right:before{border-right-color:#383838}

.hint--bottom:after,.hint--bottom:before{top:100%;left:50%}
.hint--bottom:before{margin-top:-15px;left:calc(50% - 8px)}
.hint--bottom:after{-webkit-transform:translateX(-50%);-moz-transform:translateX(-50%);transform:translateX(-50%)}
.hint--bottom:hover:before{-webkit-transform:translateY(8px);-moz-transform:translateY(8px);transform:translateY(8px)}
.hint--bottom:hover:after{-webkit-transform:translateX(-50%) translateY(8px);-moz-transform:translateX(-50%) translateY(8px);transform:translateX(-50%) translateY(8px)}

.hint--top:before,.hint--top:after { bottom: 100%;left: 50%; }
.hint--top:before { margin-bottom: -15px;left:calc(50% - 8px)}
.hint--top:after { -webkit-transform:translateX(-50%);-moz-transform:translateX(-50%);transform:translateX(-50%) }
.hint--top:hover:before{-webkit-transform:translateY(-8px);-moz-transform:translateY(-8px);transform:translateY(-8px)}
.hint--top:hover:after{-webkit-transform:translateX(-50%) translateY(-7px);-moz-transform:translateX(-50%) translateY(-7px);transform:translateX(-50%) translateY(-7px)}

.hint--right:before {margin-left: -15px;margin-bottom: -6px; }
.hint--right:after {margin-bottom: -14px; }
.hint--right:before, .hint--right:after {left: 100%;bottom: 50%;}
.hint--right:hover:before {-webkit-transform: translateX(8px);-moz-transform: translateX(8px);transform: translateX(8px); }
.hint--right:hover:after {-webkit-transform: translateX(8px);-moz-transform: translateX(8px); transform: translateX(8px); }


/*___________________ Regular __________________*/
.regolar-popup{position:fixed;bottom:-100px;transform: translate(-50%, 0); left:50%;width:auto;opacity:1;animation:regularpopup 6s ease 1;animation-fill-mode: forwards; border-radius:8px 8px 0 0;z-index:11111;}
.regolar-popup label{display:block;color:#fff;font:15px ramin;padding:9px 25px;background:#ff526c;margin-top:10px;border-radius:3px;box-shadow:0 3px  15px rgba(179, 0, 71,0.6)}
.regolar-popup label:before{content:'\e826';display:inline-block;margin-left:10px}

@keyframes regularpopup{
0%{opacity:0.3;}
15%{opacity:1;bottom:5px}
20%{opacity:1;bottom:0px}
90%{opacity:1;bottom:0px}
95%{opacity:0.5;bottom:5px;}
100%{opacity:0;bottom:-50px;}
}


/*___________________ Msgbox __________________*/
.msgbox{position:fixed;top:-250px;widt6h:auto;padding:0;padding-left:20px; height:40px; color:#fff; left:50%; transform:translate(-50% , 0);  font:13px ramin;line-height:37px; opacity:0.9; border-radius:0 0 8px 8px;z-index:99;  white-space: nowrap;;}
.msgbox i{font-size:20px;margin-left:20px;float:right;display:block;width:40px;height:40px;text-align:center;line-height:37px;background:rgba(0,0,0,0.2);border-radius:0 0 8px 0}
.msgbox:before{content:' ';display:block;position:absolute;top:0;right:0;width:0%;background:rgba(0,0,0,0.3);height:2px;animation:msgboxprogress 4.5s ease-out;z-index:100}
@keyframes msgboxprogress {
 0% { width:0% }
 20%{ width:0% }
 100% { width:100% }
}
@media only screen and (max-width:600px) {
.msgbox{left:0;right:0; transform:none;border-radius:0}

}




/*__________________ Upload img ________________________________===========_________*/
[class*=uploadfile-]{opacity:1;}
[class*=uploadfile-]{display:block; background:#fafafa center url(../images/uploadnew.png);background-repeat:no-repeat; background-size:170px 120px;position:relative;border-radius:4px;cursor:pointer;border:dashed 2px #ccc;}
[class*=uploadfile-] input{visibility: hidden ;margin-bottom:10px;width:110px; height:120px}
[class*=uploadfile-]:before{content:'';cursor: pointer;z-index:1;position:absolute;right:0px;}
[class*=uploadfile-]:hover{border:solid 2px #669999;}

.upload50{width:50%;}
.upload100{width:100%;}

.uploadfile-inputbox{height:45px; background:#fff center url(../images/uploudfile-inputbox.png)no-repeat;background-size:300px 45px}
.uploadfile-inputbox input{width:100%; height:auto }
.uploadfile-sm{background:#fff center url(../images/uploudfile-sm.png)no-repeat;background-size:35px 35px;width:45px;height:45px;border-radius:20px;border:solid 2px #ddd}



.invalid{border:solid 2px #ff6685 !important;animation:invalidanim 0.3s ease-out 3 !important }
@keyframes invalidanim {
 0% { transform: translateX(0) }
 25% { transform: translateX(2px) }
 50% { transform: translateX(-2px) }
 75% { transform: translateX(2px) }
 100% { transform: translateX(0) }
}

@media only screen and (max-width:1100px) {
.w-50{width:80% !important;}

.confirm-sm{right:50%;margin-right:-45%;width:90%;}
.confirm-md{right:50%;margin-right:-45%;width:90%;}
.confirm-lg{right:50%;margin-right:-45%;width:90%;}

.table td{font:10px tahoma;}

}